<template>

	<view class="cart-container">
		<!-- 顶部全选 -->
		<view class="select-all">
			<switch type="checkbox" :checked="type" @change="toselectall" :data-userid="userid"></switch>
			<text>全选</text>
		</view>

		<!-- 商品列表 -->
		<view class="goods-list">

			<view class="goods-item" v-for="(item, index) in arr" :key="item.proid">
				<switch type="checkbox" :checked="item.flag" :data-index="index" :data-cartid="item.cartid"
					@change="toselectone">
				</switch>
				<view class="goods-info">
					<image :src="item.img1" mode="aspectFit"></image>
					<view class="goods-detail">
						<text class="goods-name">{{item.proname}}</text>
						<text class="goods-price">{{item.originprice}}</text>
					</view>
				</view>
				<view class="goods-count">
					<button size="mini" data-index="{{index}}" @click="sub(item)">-</button>
					<text>{{item.num}}</text>
					<button size="mini" data-index="{{index}}" @click="add(item)">+</button>
				</view>
			</view>

		</view>

		<!-- 底部结算 -->
		<view class="bottom-bar">
			<view class="total-price">
				<text>合计: </text>
				<text class="price">¥{{totalPrice}}</text>
			</view>
			<button class="settle-btn">去结算</button>
		</view>
	</view>
</template>

<script setup>
	import {
		onLoad,
		onShow
	} from "@dcloudio/uni-app"
	import {
		ref
	} from 'vue';
	let arr = ref([]);
	let totalPrice = ref("");
	let flag = ref(false);
	let type = ref(false)
	let userid = uni.getStorageSync("userid")
	onLoad((option) => {
		cart();
	})

	const calculateTotalPrice = () => {
		let total = 0;
		arr.value.forEach(item => {
			if (item.flag) {
				total += Number(item.originprice) * Number(item.num);
			}
		});
		totalPrice.value = total.toFixed(2);
	}

	function toselectone(e) {
		console.log(e)
		let index = e.currentTarget.dataset.index;
		let flag = e.detail.value;
		let cartid = e.currentTarget.dataset.cartid;
		arr.value[index].flag = flag;
		selectone(cartid, flag);
		calculateTotalPrice();
	}

	function toselectall(a) {
		console.log(a)
		let userid = a.currentTarget.dataset.userid;
		let type = a.detail.value;
		selectall(userid, type);

	}
	const cart = () => {
		let token = uni.getStorageSync("token")
		let userid = uni.getStorageSync("userid")
		uni.request({
			url: "https://www.xuzhixiang.top:30001/api/cart/list",
			method: "POST",
			header: {
				token: token
			},
			data: {
				userid
			},
			success: (res) => {
				console.log(res)
				arr.value = res.data.data.map(item => ({
					...item,
				}))
				type.value = arr.value.every(item => item.flag)
				calculateTotalPrice();
			}
		})

	}
	const cartnum = (cartid, num) => {
		let token = uni.getStorageSync("token")
		let userid = uni.getStorageSync("userid")
		uni.request({
			url: "https://www.xuzhixiang.top:30001/api/cart/updatenum",
			method: "POST",
			header: {
				token: token
			},
			data: {
				cartid,
				num
			},
			success: (res) => {
				cart()
			}
		})

	}
	const cartsub = (cartid) => {
		let token = uni.getStorageSync("token")
		let userid = uni.getStorageSync("userid")
		uni.request({
			url: "https://www.xuzhixiang.top:30001/api/cart/remove",
			method: "POST",
			header: {
				token: token
			},
			data: {
				cartid,
			},
			success: (res) => {
				cart()
			}
		})

	}
	const selectone = (cartid, flag) => {
		let token = uni.getStorageSync("token")
		uni.request({
			url: "https://www.xuzhixiang.top:30001/api/cart/selectone",
			method: "POST",
			header: {
				token: token
			},
			data: {
				cartid,
				flag
			},
			success: (res) => {
				cart()
			}
		})
	}
	const selectall = (userid, type) => {
		let token = uni.getStorageSync("token")
		uni.request({
			url: "https://www.xuzhixiang.top:30001/api/cart/selectall",
			method: "POST",
			header: {
				token: token
			},
			data: {
				userid,
				type
			},
			success: (res) => {
				cart()
			}
		})

	}
	onShow(() => {
		cart();
	})

	function add(e) {
		let cartid = e.cartid;
		let num = e.num;
		if (num > 0) {
			num++;
			cartnum(cartid, num);
		}
	}

	function sub(e) {
		let cartid = e.cartid;
		let num = e.num;
		if (num > 1) {
			num--;
			cartnum(cartid, num);
		} else {
			cartsub(cartid)
		}
	}
</script>

<style>
	/* 全局样式 */
	.cart-container {
		padding: 10rpx;
		box-sizing: border-box;
		background-color: #f5f5f5;
		min-height: 100vh;
	}

	/* 全选样式 */
	.select-all {
		display: flex;
		align-items: center;
		padding: 20rpx;
		background-color: #fff;
		border-radius: 10rpx;
		margin-bottom: 20rpx;
	}

	.select-all checkbox {
		margin-right: 10rpx;
		transform: scale(1.2);
	}

	.select-all text {
		font-size: 28rpx;
		color: #333;
	}

	/* 商品列表样式 */
	.goods-list {
		background-color: #fff;
		border-radius: 10rpx;
		margin-bottom: 20rpx;
	}

	.goods-item {
		display: flex;
		align-items: center;
		padding: 20rpx;
		border-bottom: 1rpx solid #eee;
	}

	.goods-item:last-child {
		border-bottom: none;
	}

	.goods-item checkbox {
		margin-right: 20rpx;
		transform: scale(1.2);
	}

	.goods-info {
		flex: 1;
		display: flex;
		align-items: center;
	}

	.goods-info image {
		width: 160rpx;
		height: 160rpx;
		border-radius: 10rpx;
		margin-right: 20rpx;
	}

	.goods-detail {
		flex: 1;
	}

	.goods-name {
		font-size: 28rpx;
		color: #333;
		line-height: 1.4;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
		overflow: hidden;
	}

	.goods-price {
		font-size: 32rpx;
		color: #e64340;
		margin-top: 10rpx;
		font-weight: bold;
	}

	.goods-count {
		display: flex;
		align-items: center;
	}

	.goods-count button {
		width: 60rpx;
		height: 60rpx;
		line-height: 60rpx;
		padding: 0;
		font-size: 36rpx;
	}

	.goods-count text {
		width: 60rpx;
		text-align: center;
		font-size: 28rpx;
	}

	/* 底部结算样式 */
	.bottom-bar {
		position: fixed;
		bottom: 100rpx;
		left: 0;
		right: 0;
		display: flex;
		justify-content: space-around;
		align-items: center;
		padding: 20rpx;
		background-color: #fff;
		border-top: 1rpx solid #eee;
		height: 120rpx;
		box-sizing: border-box;
	}

	.total-price {
		display: flex;
		align-items: center;
	}

	.total-price text {
		font-size: 28rpx;
		/* color: #333; */
	}

	.price {
		font-size: 36rpx;
		color: #e64340;
		font-weight: bold;
		margin-left: 10rpx;
	}

	.settle-btn {
		width: 240rpx;
		height: 80rpx;
		line-height: 80rpx;
		background-color: #e64340;
		color: #fff;
		font-size: 28rpx;
		border-radius: 40rpx;
		margin-right: 0px !important;
		padding: 0;
	}
</style>